<template>
  <div class="activity-overview">
    <div class="page-header">
      <h1>学术活动总览</h1>
      <div>
        <el-button type="success" @click="exportData">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
        <el-button type="primary" @click="fetchAll" :loading="loading">刷新</el-button>
      </div>
    </div>

    <el-card class="filter-card">
      <div class="filters">
        <el-select v-model="q.type" placeholder="活动类型" clearable style="width: 140px;">
          <el-option label="学术会议" value="学术会议" />
          <el-option label="教学研讨会" value="教学研讨会" />
          <el-option label="培训" value="培训" />
          <el-option label="考察交流" value="考察交流" />
          <el-option label="竞赛评审" value="竞赛评审" />
          <el-option label="学术讲座" value="学术讲座" />
        </el-select>
        <el-select v-model="q.role" placeholder="参与角色" clearable style="width: 140px; margin-left: 12px;">
          <el-option label="组织者" value="组织者" />
          <el-option label="主持人" value="主持人" />
          <el-option label="报告人" value="报告人" />
          <el-option label="参会代表" value="参会代表" />
          <el-option label="评委" value="评委" />
        </el-select>
        <el-select v-model="q.organizerLevel" placeholder="主办级别" clearable style="width: 140px; margin-left: 12px;">
          <el-option label="校级" value="校级" />
          <el-option label="市厅级" value="市厅级" />
          <el-option label="省部级" value="省部级" />
          <el-option label="国家级" value="国家级" />
          <el-option label="国际级" value="国际级" />
        </el-select>
        <el-date-picker v-model="q.range" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="margin-left: 12px;" />
        <el-button type="primary" :loading="loading" style="margin-left: 12px;" @click="fetchAll">查询</el-button>
      </div>
    </el-card>

    <el-row :gutter="12" class="stats-row">
      <el-col :span="6"><el-card class="stat"><div>总数</div><div class="num">{{ stats.total }}</div></el-card></el-col>
      <el-col :span="6"><el-card class="stat"><div>审核中</div><div class="num info">{{ stats.pending }}</div></el-card></el-col>
      <el-col :span="6"><el-card class="stat"><div>已驳回</div><div class="num danger">{{ stats.rejected }}</div></el-card></el-col>
      <el-col :span="6"><el-card class="stat"><div>已通过</div><div class="num success">{{ stats.approved }}</div></el-card></el-col>
    </el-row>

    <el-card>
      <el-table :data="rows" stripe v-loading="loading">
        <el-table-column prop="participantName" label="参与人" width="120" />
        <el-table-column prop="activityName" label="活动名称" min-width="220" />
        <el-table-column prop="activityType" label="类型" width="110" />
        <el-table-column prop="organizer" label="主办单位" width="150" />
        <el-table-column prop="organizerLevel" label="主办级别" width="110" />
        <el-table-column label="时间" width="220">
          <template #default="{ row }">{{ d(row.startDate) }} 至 {{ d(row.endDate) }}</template>
        </el-table-column>
        <el-table-column prop="participantRole" label="角色" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }"><el-tag :type="tag(row.status)">{{ st(row.status) }}</el-tag></template>
        </el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:12px;">
        <el-pagination background layout="prev, pager, next, jumper" :page-size="pageSize" :current-page="page" :total="total" @current-change="onPage" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Download } from '@element-plus/icons-vue'
import activitiesApi from '@/api/activities'

const q = ref({ type: '', role: '', organizerLevel: '', range: [] })
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const rows = ref([])
const stats = ref({ total: 0, pending: 0, rejected: 0, approved: 0 })
const loading = ref(false)

function params(){
  return {
    page: page.value, size: pageSize.value,
    type: q.value.type || undefined,
    role: q.value.role || undefined,
    organizerLevel: q.value.organizerLevel || undefined,
    startDate: q.value.range?.[0] || undefined,
    endDate: q.value.range?.[1] || undefined
  }
}

function d(v){ return String(v||'').substring(0,10) }
function st(s){ if(!s) return '审核中'; if(s==='APPROVED' || s==='已通过') return '已通过'; if(s==='REJECTED'||s==='已驳回') return '已驳回'; return '审核中' }
function tag(s){ const t=st(s); return t==='已通过'?'success':(t==='已驳回'?'danger':'info') }

async function fetchAll(){
  try{ loading.value=true; const res = await activitiesApi.list(params()); rows.value = res?.content || []; total.value = res?.totalElements || 0; stats.value = await activitiesApi.stats(params()) } finally { loading.value=false }
}
function onPage(p){ page.value=p; fetchAll() }

const exportData = async () => {
  const { exportData: exportUtil } = await import('@/utils/exportUtils')
  
  const filters = {
    type: q.value.type,
    role: q.value.role,
    organizerLevel: q.value.organizerLevel,
    startDate: q.value.range?.[0],
    endDate: q.value.range?.[1]
  }
  
  await exportUtil('activities', filters, '学术活动列表.xlsx')
}

onMounted(fetchAll)
</script>

<style scoped>
.activity-overview { max-width: 1400px; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.filters { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.stats-row { margin-bottom: 16px; }
.stat { text-align:center; }
.num { font-size: 24px; font-weight:600; }
.num.success { color:#67c23a; }
.num.danger { color:#f56c6c; }
.num.info { color:#909399; }
</style> 